<template>
  <div class="home">
    <div class="grid">
      <div class="grid-item">
        <v-card width="296" height="650" class="">
          <v-img
            height="200px"
            src="https://cdn.pixabay.com/photo/2020/07/12/07/47/bee-5396362_1280.jpg"
          >
            <v-card-title class="white--text mt-8">
              <p class="ml-3">时间轴</p>
            </v-card-title>
          </v-img>

          <v-card-text>
            <div class="font-weight-bold ml-8 mb-2">最新更新</div>

            <v-timeline align-top dense>
              <v-timeline-item
                v-for="message in messages"
                :key="message.time"
                :color="message.color"
                small
              >
                <div>
                  <div class="font-weight-normal">
                    <strong>{{ message.from }}</strong> @{{ message.time }}
                  </div>
                  <div>{{ message.message }}</div>
                </div>
              </v-timeline-item>
            </v-timeline>
          </v-card-text>
        </v-card>
      </div>
      <div class="grid-item">
        <v-card width="296" height="320">
          <v-img
            height="200px"
            src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
          >
            <v-app-bar flat color="rgba(0, 0, 0, 0)">
              <v-spacer></v-spacer>
              <v-btn color="white" icon>
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </v-app-bar>

            <v-card-title class="white--text mt-4"> </v-card-title>
          </v-img>
        </v-card>
      </div>
      <div class="grid-item">
        <v-card width="296" height="320">
          <v-card-title class="subheading font-weight-bold">
            {{ dataInfo.name }}
          </v-card-title>

          <v-divider></v-divider>

          <v-list dense>
            <v-list-item>
              <v-list-item-content>数量:</v-list-item-content>
              <v-list-item-content class="align-end">
                {{ dataInfo.calories }}
              </v-list-item-content>
            </v-list-item>

            <v-list-item>
              <v-list-item-content>阅览:</v-list-item-content>
              <v-list-item-content class="align-end">
                {{ dataInfo.fat }}
              </v-list-item-content>
            </v-list-item>

            <v-list-item>
              <v-list-item-content>回复:</v-list-item-content>
              <v-list-item-content class="align-end">
                {{ dataInfo.carbs }}
              </v-list-item-content>
            </v-list-item>

            <v-list-item>
              <v-list-item-content>点赞:</v-list-item-content>
              <v-list-item-content class="align-end">
                {{ dataInfo.protein }}
              </v-list-item-content>
            </v-list-item>

            <v-list-item>
              <v-list-item-content>图片:</v-list-item-content>
              <v-list-item-content class="align-end">
                {{ dataInfo.sodium }}
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-card>
      </div>

      <div class="grid-item">
        <v-card width="296" height="650">
          <v-toolbar color="cyan">
            <v-toolbar-title>信息</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>

          <v-list three-line>
            <template v-for="(item, index) in items">
              <v-subheader
                v-if="item.header"
                :key="item.header"
                v-text="item.header"
              ></v-subheader>

              <v-divider
                v-else-if="item.divider"
                :key="index"
                :inset="item.inset"
              ></v-divider>

              <v-list-item v-else :key="item.title">
                <v-list-item-avatar>
                  <v-img :src="item.avatar"></v-img>
                </v-list-item-avatar>

                <v-list-item-content>
                  <v-list-item-title v-html="item.title"></v-list-item-title>
                  <v-list-item-subtitle
                    v-html="item.subtitle"
                  ></v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-card>
      </div>
      <div class="grid-item">
        <v-card width="296" height="320"> </v-card>
      </div>
      <div class="grid-item">
        <v-card width="296" height="320"> </v-card>
      </div>
    </div>
  </div>
</template>

<script>
import masonry from "@/plugins/masonry";
export default {
  name: "Home",
  components: {},
  data: () => {
    return {
      loading: false,
      selection: 1,
      messages: [
        {
          from: "You",
          message: `Sure, I'll see you later.`,
          time: "10:42am",
          color: "deep-purple lighten-1",
        },
        {
          from: "John Doe",
          message: "Yeah, sure. Does 1:00pm work?",
          time: "10:37am",
          color: "green",
        },
        {
          from: "You",
          message: "Did you still want to grab lunch today?",
          time: "9:47am",
          color: "deep-purple lighten-1",
        },
      ],
      items: [
        { header: "Today" },
        {
          avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
          title: "Brunch this weekend?",
          subtitle: `<span class="text--primary">Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
        },
        { divider: true, inset: true },
        {
          avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
          title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
          subtitle: `<span class="text--primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.`,
        },
        { divider: true, inset: true },
        {
          avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
          title: "Oui oui",
          subtitle:
            '<span class="text--primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
        },
        { divider: true, inset: true },
        {
          avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
          title: "Birthday gift",
          subtitle:
            '<span class="text--primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?',
        },
        { divider: true, inset: true },
        {
          avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
          title: "Recipe to try",
          subtitle:
            '<span class="text--primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
        },
      ],
      dataInfo: {
        name: "数据信息",
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        sodium: 87,
      },
    };
  },
  methods: {
    reserve() {
      this.loading = true;

      setTimeout(() => (this.loading = false), 2000);
    },
    initMasonry() {
      var grid = document.querySelector(".grid");
      new masonry(grid, {
        // options...
        itemSelector: ".grid-item",
        columnWidth: 300,
        fitWidth: true,
        // isAnimated: true,
        // itemSelector: ".grid-item", // 要布局的网格元素
        gutter: 10, // 网格间水平方向边距，垂直方向边距使用css的margin-bottom设置
        // percentPosition: true, // 使用columnWidth对应元素的百分比尺寸
        // stamp: ".grid-stamp", // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方
        // fitWidth: true, // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示
        // originLeft: true, // 默认true网格左对齐，设为false变为右对齐
        // originTop: true, // 默认true网格对齐顶部，设为false对齐底部
        // containerStyle: { position: "relative" }, // 设置容器样式
        // transitionDuration: "0.8s", // 改变位置或变为显示后，重布局变换的持续时间，时间格式为css的时间格式
        // stagger: "0.03s", // 重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间
        // resize: false, // 改变窗口大小将不会影响布局
        // initLayout: true, // 初始化布局，设未true可手动初试化布局
      });
    },
  },
  mounted: function () {
    this.initMasonry();
  },
  updated: function () {
    this.initMasonry();
  },
};
</script>

<style scoped>
/* 居中 */
.grid {
  margin: 0 auto;
}

.grid-item {
  margin-top: 10px;
}

@media screen and (max-width: 1000px) {
  .grid-item {
    width: 300px;
  }
  .grid-item-add {
    height: 620px;
  }
}
</style>
